<template>
	<div class="find-message">
		<div v-show='init' class="mescroll" id="mescroll" style="height: 100%;">
			<div class='messageBox' v-show='info.length>0'>
				<div v-for="(item,index) in info" :key="index">
					<!--<div v-if='item.messageType=="MGM"'>
						<div class='active-box'>
							<div class='flex flex-item-v-center title-box'>
								<div class='tips'>活动</div>
								<span class='flex-1 ecs'>{{item.msgTitle||"提醒"}}</span>
								<div class='tips-around' v-show='item.state=="NOTREAD" ? true:false'></div>
							</div>
							<div class='active-content ecs ecs-2'>
								{{item.msgContent}}
							</div>
						</div>
					</div>-->
					<!--<div v-else>-->
						<div class='messageitem' @click="toOrderInfo(item)">
							<div class='notread' v-show='item.state=="NOTREAD" ? true:false'></div>
							<div class='flex flex-r titleinfo flex-item-between flex-item-v-center'>
								<div class='msgtitle'>{{item.msgTitle||'花伴商城PLUS'}}</div>
								<div class='logistics' v-if='item.logistics'>{{item.logistics}} : {{item.logisticsNo}}</div>
							</div>
							<div class='flex flex-r infochar flex-item-between flex-item-v-center'>
								<div class='flex flex-c infocharbox'>
									<div class='orderstate' v-if="item.msgTitle">您好，您的{{item.msgTitle}}啦~ </div>
									<div class='ordergoodname ecs ecs-2'>{{item.msgContent}}</div>
									<div class='infotime'>{{item.createDate}}</div>
								</div>
								<img :src="item.attaUrl||'https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/Placehodler/img_placeholder_84_84@2x.png'" class='infocharimg' />
							</div>
						</div>
					<!--</div>-->
				</div>
			</div>
			<div v-show='info.length<1' class='flex flex-1 flex-item-center messagenot'>
				<div class='not_tips flex flex-c flex-item-center'>
					<img class="noorder" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/ic_empty.png" />
					<span>您目前没有消息</span>
				</div>
			</div>

		</div>
		<div v-show='iserror' class='flex flex-1 flex-item-center messagenot'>
			<div class='not_tips flex flex-c flex-item-center'>
				<img class="errororder" src="https://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/error.png" />
				<span>网络错误</span>
			</div>
		</div>
	</div>
</template>

<script>
	import MeScroll from 'mescroll'
	import http from '@/util/http'
	import Api from '@/util/api'
	import utils from '@/util/util'
	export default {
		data() {
			return {
				pageNum: 1,
				info: [],
				init: false,
				iserror: false
			}
		},
		created: function() {
			this.$vux.loading.show({
				text: '加载中'
			})
			this.downCallback()
		},
		mounted: function() {
			var self = this;
			self.mescroll = new MeScroll("mescroll", {
				down: {
					callback: self.downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
				},
				up: {
					callback: self.upCallback, //上拉加载的回调
					isBounce: true //如果您的项目是在iOS的微信,QQ,Safari等浏览器访问的,建议配置此项.解析(必读)
						,
					offset: 50
				}
			});
		},
		methods: {
			downCallback() {
				this.pageNum = 1;
				http.post(Api.userMessages, {
					numPerPage: 10,
					order: "asc",
					pageNum: this.pageNum,
					userId: utils.getUserInfo().user.id,
					sort: "createDate"
				}).then(res => {
					if(res.code == 200) {
						let self = this;
						this.$vux.loading.hide()
						this.init = true;
						this.info = res.data.rows;
						this.mescroll.endDownScroll(false);
						if(this.info.length == res.data.total) {
							this.mescroll.endUpScroll(true);
							setTimeout(function() {
								self.mescroll.lockUpScroll();
							}, 500)

							return;
						}
						this.mescroll.endUpScroll(false);
						this.mescroll.lockUpScroll(false);
						//						this.info = res.data.rows;
						//						this.mescroll.endDownScroll();
						//						this.mescroll.lockUpScroll(false);
					} else {
						this.toast(res.message)
					}
				}).catch((e) => {
					this.iserror = true;
				})
			},
			upCallback(page) {
				console.log('up')
				this.pageNum++;
				http.post(Api.userMessages, {
					numPerPage: 10,
					order: "asc",
					pageNum: this.pageNum,
					userId: utils.getUserInfo().user.id,
					sort: "createDate"
				}).then(res => {
					console.log(res);
					if(res.code == 200) {
						this.info = [...this.info, ...res.data.rows];
						this.mescroll.endUpScroll(false)
						if(this.info.length == res.data.total) {
							this.mescroll.endUpScroll(true);
							this.mescroll.lockUpScroll();
						}
					} else {
						this.toast(res.message)
					}
				})
			}
			,toOrderInfo(item){
				if (item.state == "NOTREAD") {
					http.post(Api.updateMsgState,{
			        id: item.id
			      })
			    }
				this.$router.push("/order-info?id="+item.id);
			}
		}
	}
</script>

<style lang="less" rel="stylesheet/less">
	@import '../../assets/css/mescroll.min.css';
	.find-message {
		height: 100%;
		width: 100%;
		background-color: #f2f2f2;
		.messageBox {
			width: 6.9rem;
			padding: .3rem;
		}
		.messageitem {
			background-color: #fff;
			width: 6.5rem;
			height: 2.14rem;
			padding: .2rem;
			border-radius: .1rem;
			margin-bottom: .2rem;
			position: relative;
		}
		.titleinfo {
			height: .4rem;
			font-size: .22rem;
			color: #909090;
		}
		.logistics {
			margin-right: .2rem;
		}
		.notread {
			position: absolute;
			width: .2rem;
			height: .2rem;
			border-radius: 50%;
			background-color: #FF4C5D;
			right: .1rem;
			top: .1rem;
		}
		.msgtitle {
			font-size: .32rem;
			color: #464646;
		}
		.infochar {
			height: 1.74rem;
		}
		.infocharbox {
			font-size: .22rem;
			color: #464646;
			width: 4.68rem;
		}
		.infotime {
			color: #e6e6e6;
			margin-top: .15rem;
		}
		.ordergoodname {
			margin-top: .15rem;
		}
		.infocharimg {
			width: 1.32rem;
			height: 1.32rem;
			border: 1px solid #e6e6e6;
		}
		.messagenot {
			height: 100%;
			width: 100%;
		}
		.not_tips span {
			padding: .2rem 0;
			font-size: .2rem;
			color: #909090;
		}
		.noorder {
			width: 2.05rem;
			height: 2.05rem;
			margin-top: 30%;
		}
		.errororder {
			width: 2.05rem;
			height: 2.05rem;
			margin-top: 30%;
		}
		.active-box {
			height: 1.74rem;
			background-color: #fff;
			border-radius: .08rem;
			margin-bottom: .3rem;
		}
		.tips {
			width: .6rem;
			height: .32rem;
			background-color: #FF4C5D;
			color: #fff;
			text-align: center;
			line-height: .32rem;
			font-size: .22rem;
			border-radius: .08rem;
			margin-right: .18rem;
			display: inline-block;
		}
		.title-box {
			height: .88rem;
			padding: 0 .3rem;
			color: #464646;
			font-size: .32rem;
			position: relative;
		}
		.tips-around {
			width: .2rem;
			height: .2rem;
			background-color: #FF4C5D;
			border-radius: 100%;
			position: absolute;
			right: .18rem;
			top: .18rem;
		}
		.active-content {
			height: .6rem;
			line-height: .3rem;
			font-size: .22rem;
			color: #464646;
			padding: 0 .3rem;
		}
	}
</style>